import { StyleSheet } from 'react-native';
import { phonePx, px } from '../../../../util/adapt';
import { APP_BLACK } from '../../../../constant/color';
import {
  CARD_HEIGHT,
  CARD_WIDTH,
  CLASS_ROOM_RIGHT_SCALE,
  LIVE_AREA,
  LIVE_AREA_HEIGHT,
  MARGIN_TOP
} from '../../constant';

export default StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    position: 'absolute',
    left: 0,
    top: MARGIN_TOP,
    right: 0,
    bottom: MARGIN_TOP
  },
  content: {
    flex: 1,
    backgroundColor: APP_BLACK,
    justifyContent: 'center',
    alignItems: 'center'
  },
  cover: {
    width: CARD_WIDTH,
    height: CARD_HEIGHT
  },
  rightContent: {
    width: LIVE_AREA,
    height: LIVE_AREA_HEIGHT
  },
  loadTeacher: {
    width: LIVE_AREA,
    height: LIVE_AREA_HEIGHT,
    overflow: 'hidden'
  },
  teacherPlayer: {
    width: LIVE_AREA,
    height: LIVE_AREA_HEIGHT
  },
  teacher: {
    width: LIVE_AREA,
    height: LIVE_AREA_HEIGHT
  },
  teacherMask: {
    justifyContent: 'flex-end',
    position: 'absolute',
    left: 0,
    top: 0,
    width: LIVE_AREA,
    height: LIVE_AREA_HEIGHT,
    backgroundColor: 'rgba(rgba(42, 42, 42, 0.6)'
  },
  hiddenTeacher: {
    top: -1000
  },
  loadTeacherDesc: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: px(16)
  },
  playIcon: {
    width: px(41),
    height: px(41),
    marginLeft: px(16)
  },
  teacherDesc: {
    fontSize: px(24),
    color: '#fff',
    fontWeight: '500',
    marginLeft: px(16)
  },
  leftLine: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    width: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    backgroundColor: '#F3F3F3'
  },
  topLine: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    height: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    backgroundColor: '#F3F3F3'
  },
  rightLine: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    width: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    backgroundColor: '#F3F3F3'
  },
  bottomLine: {
    position: 'absolute',
    right: 0,
    bottom: 0,
    left: 0,
    height: phonePx(2) * CLASS_ROOM_RIGHT_SCALE,
    backgroundColor: '#F3F3F3'
  },
  corner: {
    position: 'absolute',
    left: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    top: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    zIndex: 31
  }
});
